<template>
  <div class="page-wrapper">
    <ul>
      <li class="paging-size">
        <select @change="getPageSize">
          <option v-for="i in sizes" :value="i" :selected="i == pageSize" :key="i">{{ i }}</option>
        </select>
      </li>
      <li class="paging-item" v-if="current != 1" @click="jump(1)">首页</li>
      <li class="paging-item" v-if="current - 1 > 0" @click="jump(current - 1)">上一页</li>
      <li class="paging-item" v-if="current - 2 > 0" @click="jump(current - 2)">{{ current - 2 }}</li>
      <li class="paging-item" v-if="current - 1 > 0" @click="jump(current - 1)">{{ current - 1 }}</li>
      <li class="paging-item current" @click="jump(current)">{{ current }}</li>
      <li class="paging-item" v-if="total - current > 1" @click="jump(current + 1)">{{ current + 1 }}</li>
      <li class="paging-item" v-if="total - current > 2" @click="jump(current + 2)">{{ current + 2 }}</li>
      <li class="paging-item" v-if="total - current > 1" @click="jump(current + 1)">下一页</li>
      <!-- <li class="paging-item" v-if="current != total" @click="jump(total)">尾页</li> -->
      <li class="paging-item" v-if="current" @click="jump(total)">尾页</li>
      <li class="paging-jump">
        <input type="number" v-model="jumpPage" :max="total" min="0" />
        <input type="button" value="跳转" @click="jump(jumpPage)" />
      </li>
      <li class="paging-item">总共：{{ total }}页</li>
    </ul>
  </div>
</template>
<script>
/*
 * 所需参数
 * total  Number  总页数
 * current  Number  当前页面下标
 * pageSize  Number  页面显示条数
 * sizes Array  页面条数容器数组
 * jump(index)  function 重新获取数据的方法
 * getPageSize(index) function 更改页面显示条数的方法
 */
export default {
  data () {
    return {
      jumpPage: 0
    }
  },
  props: {
    total: Number,
    current: Number,
    pageSize: Number,
    sizes: {
      type: Array,
      default: function () {
        return [10, 20, 50]
      }
    }
  },
  mounted () {
    if (this.total - this.current > 1) {
      this.jumpPage = this.current + 1
    } else {
      this.jumpPage = 1
    }
  },
  watch: {
    current () {
      if (this.total - this.current > 1) {
        this.jumpPage = this.current + 1
      } else {
        this.jumpPage = 1
      }
    }
  },
  methods: {
    jump (index) {
      index = Number(index)
      if (this.current !== index && index > 0 && index < this.total + 1) {
        this.$emit('jump', index)
      }
    },
    getPageSize (e) {
      let pageSize = Number(e.target.value)
      this.$emit('getPageSize', pageSize)
    }
  }
}
</script>

<style lang="less">
@color: #1199f0;
.page-wrapper {
  padding: 1.25rem 0.625rem;
  ul {
    overflow: hidden;
    display: table;
    margin: 0 auto;
    height: 3.125rem;
    list-style: none;
    li {
      float: left;
    }
  }
  .paging-size {
    height: 1.875rem;
    margin-right: 1.25rem;
    select {
      width: 3.325rem;
      height: 1.875rem;
      margin-top: 0.2rem;
      text-align: center;
      border: 1px solid @color;
    }
  }
  .paging-item {
    height: 1.875rem;
    line-height: 1.875rem;
    margin: 0.1875rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 0.3125rem;
    font-size: 0.75rem;
    color: #666;
    cursor: pointer;
    &:hover,
    &.current {
      color: #fff;
      background-color: @color;
    }
  }
  .paging-jump {
    margin-left: 1.25rem;
    margin-top: 0.1875rem;
    height: 1.875rem;
    font-size: 0;
    overflow: hidden;
    input[type='number'] {
      float: left;
      padding: 0 0.3125rem;
      width: 3.125rem;
      height: 1.75rem;
      text-align: center;
      border: 1px solid @color;
    }
    input[type='button'] {
      float: left;
      padding: 0 0.75rem;
      height: 1.875rem;
      border: none;
      color: #fff;
      background-color: @color;
    }
  }
}
</style>
